<template>
  <a-trigger :trigger="['hover', 'click']" position="rt" v-model:popup-visible="visible">
    <div id="logo" @click="handleIconClick">
      <img alt="Logo" src="../assets/boxy.png" width="36" height="36" />
    </div>
    <template #content>
      <div class="navigatorMenu">
        <a-doption>新建</a-doption>
        <a-doption @click="handleSaveClick">保存到电脑</a-doption>
        <a-doption @click="handleOpenClick">打开本地文件</a-doption>
        <!--<a-doption @click="handleSaveToCloud">保存至云端</a-doption>
        <a-doption @click="handleReadCloud">打开云端文件</a-doption>-->
        
        <a-divider margin="1px" />
        <a-doption @click="handleSearchClick">查找</a-doption>
        <a-divider margin="1px" />
        <a-doption @click="handleOptionsClick">设置</a-doption>
        <a-doption @click="handleAboutClick">关于</a-doption>
      </div>
    </template>
  </a-trigger>
  <Settings ref="modal"></Settings>
</template>

<script setup>
import Blockly from 'blockly'
import { ref } from 'vue'

import { useStore } from '../store/store'
import Settings from './Settings.vue'

import axios from 'axios'
var file_name = "默认值"
const visible = ref()
const modal = ref()
const store = useStore()

function handleIconClick() {
  Blockly.hideChaff()
}

function handleReadFile(name){
  var url = "./api.php";
  var data = {
      // 请求体数据
      mode:'read',
      name:name
  };
  axios.post(url,JSON.stringify(data))
    .then((x)=>{
      console.log(x.data)
      Blockly.serialization.workspaces.load(x.data, store.workspaceSvg)
    })
}

function handleSaveToCloud() {
  var phph_name = ''
  const json = Blockly.serialization.workspaces.save(store.workspaceSvg)
  const text = JSON.stringify(json)
  var result = prompt("请输入你的名字", file_name);
  
  if (result === null) {
    console.log("用户点击了取消按钮");
    phph_name = 'project'
  } else {
    phph_name = result
  }
  var file_name = phph_name
  var url = "./api.php";
  var data = {
      // 请求体数据
      mode:'save',
      code:text,
      name:phph_name
  };
  axios.post(url,JSON.stringify(data))
    .then((x)=>{
      console.log(x.data)
    })
  /*fetch(url, {
      method: "POST",
      headers: {
          "Content-Type": "application/x-www-form-urlencoded"
      },
      body: JSON.stringify(data)
  })
  .then(function(response) {
      return response.json();
  })
  .then(function(data) {
      console.log(data);
  })
  .catch(function(error) {
      console.log(error);
  });
  */
}

    // 动态创建样式标签，并将样式内容注入到其中
    function injectCSS(cssContent) {
      var style = document.createElement("style");
      style.innerHTML = cssContent;
      document.head.appendChild(style);
    }

    // 创建全屏弹出框
    function createFullscreenDialog() {
      // 创建全屏遮罩层
      var fullscreenOverlay = document.createElement("div");
      fullscreenOverlay.id = "fullscreen-overlay";
      fullscreenOverlay.style.display = "none";

      // 创建弹出框内容
      var fullscreenContent = document.createElement("div");
      fullscreenContent.id = "fullscreen-content";

      // 创建关闭按钮
      var closeButton = document.createElement("button");
      closeButton.textContent = "关闭";
      closeButton.addEventListener("click", closeFullscreen);

      // 将关闭按钮添加到弹出框内容中
      fullscreenContent.appendChild(closeButton);

      // 将弹出框内容添加到全屏遮罩层中
      fullscreenOverlay.appendChild(fullscreenContent);

      // 将全屏遮罩层添加到文档的 body 元素中
      document.body.appendChild(fullscreenOverlay);
    }

    // 打开全屏弹出框
    function openFullscreen(data) {
      var fullscreenOverlay = document.getElementById("fullscreen-overlay");
      fullscreenOverlay.style.display = "flex";

      // 解析字符串为 JSON 对象
      var jsonObj = data;

      // 构建 HTML 结构
      var html = '<button onclick="closeFullscreen()">关闭</button>';

      for (var key in jsonObj) {
        var value = jsonObj[key];
        html += '<button onclick="handleReadFile('+ "'" + value + "'" + ')">' + value + '</button>';
      }

      // 获取目标元素并设置 HTML
      var overlayDiv = document.getElementById('fullscreen-content');
      overlayDiv.innerHTML = html;

    }

    // 关闭全屏弹出框
    function closeFullscreen() {
      var fullscreenOverlay = document.getElementById("fullscreen-overlay");
      fullscreenOverlay.style.display = "none";
    }

    // 注入样式
    var cssContent = `
      #fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }

      #fullscreen-content {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
      }
    `;
    injectCSS(cssContent);
    createFullscreenDialog();
function handleReadCloud(){
  var url = "./api.php";
  var data = {
      // 请求体数据
      mode:'list',
  };
  axios.post(url,JSON.stringify(data))
    .then((x)=>{
      console.log(x.data)
      openFullscreen(x.data)
    })
  
}



function handleSaveClick() {
  const json = Blockly.serialization.workspaces.save(store.workspaceSvg)
  const text = JSON.stringify(json)
  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const anchor = document.createElement('a')
  anchor.href = url
  anchor.download = 'project.phph'
  anchor.click()
  visible.value = false
}

function handleOpenClick() {
  const input = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('name', 'file')
  input.setAttribute('visibility', 'hidden')
  input.setAttribute('accept', '.phph')
  input.addEventListener('change', function () {
    const file = this.files[0]
    const reader = new FileReader()
    reader.addEventListener('load', function () {
      const json = JSON.parse(this.result)
      Blockly.serialization.workspaces.load(json, store.workspaceSvg)
    })
    reader.readAsText(file)
  })
  input.click()
  visible.value = false
}

function handleSearchClick() {
  store.searchVisible = true
  visible.value = false
}

function handleOptionsClick() {
  modal.value.handleClick()
  visible.value = false
}

function handleAboutClick() {
  window.open('https://www.yuque.com/hzsn/boxy')
  visible.value = false
}
</script>

<style>
#logo {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;

  width: 36px;
  height: 36px;
  padding: 12px;

  background-color: var(--color-bg-2);
}

.navigatorMenu {
  overflow: hidden;

  box-sizing: border-box;
  padding: 12px 16px;

  font-size: 14px;
  line-height: 1.5715;
  color: var(--color-text-2);

  background-color: var(--color-bg-popup);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 -2px 5px rgb(0 0 0 / 10%);

  animation: show-dropdown cubic-bezier(0.3, 1.3, 0.3, 1) 400ms forwards !important;

  > li {
    -webkit-tap-highlight-color: transparent;
  }
}

@keyframes show-dropdown {
  0% {
    width: 0;
    height: 0;
  }

  100% {
    width: 150px;
    height: 248px;
  }
}
</style>
